<template>
  <div class="bookmark">
    <van-nav-bar title="我的收藏" fixed left-arrow @click-left="$router.back()">
      <template #right>
        <div class="right-icon" @click="isshow" v-if="show">
          <img src="@/assets/additional/icon_homepage_search_delete.png" alt="" />
        </div>

        <div @click="isshow" v-if="!show">
          <span>完成</span>
        </div>
      </template>
    </van-nav-bar>

    <ul v-if="data.length >= 1">
      <li v-for="value in data" :key="value.id"  
      @click="$router.push({ path: `/videodetail/${value.id}`})">
        <div>
          <img :src="`http://pic.angelboy.cn/web/${value.imageid}.jpg`" alt="">
        </div>
        <div class="palyButtom" v-if="value.isVideo ==true"></div>
        <div class="deletefoot" v-if="!show" @click.stop="delefoot(value.id)"></div>
        <p>{{value.title}}</p>
      </li>
    </ul>

     <div v-if="data.length == 0" class="nocollection">
      <p>快去收藏更多~</p>
    </div>
  </div>
</template>

<script>
import FootList from '@/utils/localStorage'

export default {
  name: 'bookmark',
  data(){
    return{
      data: FootList.getData(),
      show:true
    }
  },
  methods:{
    isshow() {
      this.show = !this.show
    },
    delefoot(id) {
      this.data = this.data.filter(item => item.id != id)
      localStorage.setItem('myLike', JSON.stringify(this.data))
    }
  }
}
</script>

<style lang="less" scoped>
.bookmark {
  height: 100vh;
  background-color: #fafafa;

  .nocollection {
    padding: 56px 10px;
    text-align: center;
    font-size: 14px;
    color: #8f8f8f;
  }

  .right-icon {
    width: 20px;
    height: 20px;

    img {
      width: 100%;
      height: 100%;
    }
  }
  .van-nav-bar {
    z-index: 999;
  }
  /deep/.van-nav-bar__title {
    font-weight: 600;
    color: #555;
    font-size: 18px;
  }
  /deep/.van-icon {
    color: #555;
    font-size: 20px;
  }

  ul {
    padding: 46px 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    li {
      width: 170px;
      height: 150px;
      margin-bottom: 10px;
      position: relative;
      
      div {
        width: 170px;
        height: 125px;

        img {
          width: 100%;
          height: 100%;
          display: block;
        }
      }

      .palyButtom {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        // background-color: black;
        position: absolute;
        top: 50px;
        left: 0;
        right: 0;
        margin: 0 auto;
        background-image: url('@/assets/home/video_icon.png');
        background-size: cover;
      }

      .deletefoot {
        width: 25px;
        height: 25px;
        // background-color: black;
        position: absolute;
        top: 0;
        right: 0;
        background-image: url('@/assets/additional/delete.png');
        background-size: cover;
      }

      p {
        height: 25px;
        line-height: 25px;
        text-align: center;
        color: black;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>
